<template>
  <div style="height: 100%;">
<div class="chart" id="chart6" style="height: 100%;"></div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      chart1: null
    }
  },
  mounted () {
    this.setChart6()
  },
  methods: {

    setChart6 () {
      this.chart1 = this.$echarts.init(document.getElementById('chart6'))
      this.chart1.setOption({
        grid: {
          top: '10%',
          left: '0%',
          right: '0%',
          bottom: '0%',
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'none'
          },
          backgroundColor: '#fff',
          textStyle: {
            color: '#8181A5'
          }
        },
        legend: {
          show: false,
          data: [
            {
              name: '计划',
              icon: 'triangrectle'
            },
            {
              name: '实际',
              icon: 'rect'
            }
          ],
          top: '2%',
          right: '6%',
          itemHeight: 6,
          textStyle: {
            color: '#8181A5'
          }
        },
        xAxis: [
          {
            type: 'category',
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            data: ['已投标', '已中标', '未中标', '合同签订', '实施项目'],
            axisLabel: {
              // show: false,
              // formatter: '{value} ',
              color: '#8181A5'
            }
            // axisPointer: {
            //   type: 'shadow'
            // }
          }
        ],
        yAxis: [
          {
            type: 'value',
            // name: '实际进度',
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              // show: false,
              formatter: '{value} ',
              color: '#8181A5'
            },
            splitLine: {
              // show: false,
              lineStyle: {
                color: '#EBEDF2'
              }
            }
          }
        ],
        series: [
          {
            name: '计划',
            type: 'bar',
            barMaxWidth: 16,
            label: {
              show: true,
              position: 'top',
              fontSize: 12,
              fontWeight: 500
            },
            data: [30, 20, 10, 20, 15],
            itemStyle: {
              normal: {
                // barBorderRadius: [10, 10, 10, 10],
                color: {
                  type: 'linear',
                  // x2=1,y=0,柱子的颜色在水平方向渐变
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 1,
                      color: '#587FFF'
                    },
                    {
                      offset: 0,
                      color: '#A8BCFF'
                    }
                  ]
                }
              }
            }
          }
        ]
      })
      window.addEventListener('resize', () => {
        this.sizechange()
      })
      // setTimeout(() => { // 由于网格布局拖拽放大缩小图表不能自适应，这里设置一个定时器使得echart加载为一个异步过程
      //   this.$nextTick(() => {
      //     this.sizechange()
      //   })
      // }, 0)
    },
    sizechange () {
      console.log('000000000000')
      this.chart1.resize()
    }
  }
}
</script>
